/*================ 
Template Name: Artivell
Description:  Architecture and Interior Designer Page HTML Template
Version: 1.0 
Author: https://www.templatemonster.com/authors/techeshta
=======================*/

/********************** 
[Table Of Content]
01. General CSS
02. Header
03. Hero Section
04. About US Section
05. Services Section
06. Skill Section 
07. counter-section
08. Process Section
09. Portfolio section
10. Our Professional
11. Testimonial section
12. Touch Section 
13. Blog section
14. Contact Us Section
15. Footer Section
16. About Us Page
17. Portfolio Page
18. Services Page
19. Blog Page
20. Single Blog Page
21. Contact Page
22. 404 Page
23. Coming Soon Page
**********************/

/************************* 
01. General CSS
*************************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}
:root {
    --primary-font: "Vidaloka";
    --secondary-font: "Commissioner";
    --text-font: "DM Sans";
    --primary-color: #0b7e3c;
    --secondary-color: #646464;
    --black-color: #000000;
    --white-color: #fff;
}

body {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    font-family: var(--text-font);
    padding: 0px;
    margin: 0px;
    border: 0;
}
p {
    margin: 0px;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    font-family: var(--text-font);
    color: var(--secondary-color);
}
/*** header ***/
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    padding: 0;
}
h1 {
    font-size: 60px;
    line-height: 70px;
    font-weight: 500;
    font-family: var(--primary-font);
}
h2 {
    font-size: 44px;
    line-height: 54px;
    font-weight: 500;
    font-family: var(--primary-font);
}
h3 {
    font-size: 36px;
    line-height: 46px;
    font-weight: 400;
    font-family: var(--primary-font);
}
h4 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 500;
    font-family: var(--text);
}
h5 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    font-family: var(--text);
}
h6 {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    font-family: var(--text);
}
/*** list ***/
ul,
ol {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*** link ***/
a {
    color:var(--white-color);
    text-decoration: none;
    transition: all 0.3s ease;
}
a,
a:active,
a:focus,
a:active {
    text-decoration: none;
}
a:hover,
a:focus {
    outline: none;
    text-decoration: none;
}

/*** btn ***/
.btn {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    font-family: var(--text);
    background-color: #0b7e3c;
    color: var(--white-color);
    border: 1px solid #0b7e3c;
    border-radius: 0px;
    padding: 12px 35px;
}
.btn:hover {
    background-color: transparent;
    color: #0b7e3c;
    border: 1px solid #0b7e3c;
    border-radius: 0px;
}
/*** padding-top-bottom ***/
.ptb-120 {
    padding: 120px 0px;
}
.pt-120 {
    padding-top: 120px;
}
.pt-110 {
    padding-top: 110px;
}
.pt-100 {
    padding-top: 100px;
}
.pt-90 {
    padding-top: 90px;
}
.pt-80 {
    padding-top: 80px;
}
.pt-70 {
    padding-top: 70px;
}
.pt-60 {
    padding-top: 60px;
}
.pt-50 {
    padding-top: 50px;
}
.pt-40 {
    padding-top: 40px;
}
.pt-30 {
    padding-top: 30px;
}
.pt-20 {
    padding-top: 20px;
}
.pt-10 {
    padding-top: 10px;
}
.pb-120 {
    padding-bottom: 120px;
}
.pb-110 {
    padding-bottom: 110px;
}
.pb-100 {
    padding-bottom: 100px;
}
.pb-90 {
    padding-bottom: 90px;
}
.pb-80 {
    padding-bottom: 80px;
}
.pb-70 {
    padding-bottom: 70px;
}
.pb-60 {
    padding-bottom: 60px;
}
.pb-50 {
    padding-bottom: 50px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-30 {
    padding-bottom: 30px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pb-10 {
    padding-bottom: 10px;
}
/*** margin-top-bottom ***/
.mt-10 {
    margin-top: 10px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-60 {
    margin-top: 60px;
}
.mt-70 {
    margin-top: 70px;
}
.mt-80 {
    margin-top: 80px;
}
.mt-90 {
    margin-top: 90px;
}
.mt-100 {
    margin-top: 100px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-60 {
    margin-bottom: 60px;
}
.mb-70 {
    margin-bottom: 70px;
}
.mb-80 {
    margin-bottom: 80px;
}
.mb-90 {
    margin-bottom: 90px;
}
.mb-100 {
    margin-bottom: 100px;
}
/************************* 
    02. Header
*************************/
 .top-bar{
    background-color: #0b7e3c;
}
 .top-bar .content-info a:hover{
    color: #0b7e3c;
}
.top-bar .social-icon a i{ 
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    line-height: 32px;
    border-radius: 30px;
    background-color: #0b7e3c;
    color: #0b7e3c;
    margin-left: 10px;
}
 .top-bar .social-icon a i:hover{ 
    background-color: #0b7e3c;
    color:#0b7e3c;
}

 .main-inner{
    background-color: var(--white-color);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
}
 .navbar-expand-lg a img{
    width: 210px;
}
 .main-inner .navbar-expand-lg .navbar-nav .nav-item .nav-link{
    margin: 0px 25px;
    padding: 0px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: var(--black-color);
    border-bottom: 2px solid var(--white-color);
}
 .main-inner .navbar-expand-lg .navbar-nav .nav-item .nav-link:hover{
    border-bottom: 2px solid #0b7e3c;
    color: #0b7e3c;
}
 .main-inner .navbar-expand-lg .navbar-nav .nav-item .active{
    border-bottom: 2px solid #0b7e3c;
    color: #0b7e3c;
}
.main-inner .navbar-toggler {
    padding: 8px;
    border: none;
    background-color: var(--primary-color);
    border-radius: 0px;
    color: var(--white-color);
    font-size: 20px;
}
.main-inner .navbar-toggler:hover{
    background-color: var(--black-color);
    color: var(--white-color);
} 
@media (max-width: 767px) {
  .top-bar {
    display: none !important;
  }
}

/* Rende compatto il selettore lingua di Google */
#google_translate_element {
  max-width: 150px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Rimuove larghezze automatiche e padding interni */
.goog-te-gadget {
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Limita il select dropdown */
#google_translate_element select {
  padding: 4px;
  font-size: 13px;
  height: auto;
  max-width: 120px;
}

#google_translate_element_desktop,
#google_translate_element_mobile {
  max-width: 160px;
  font-size: 13px;
}

.goog-te-gadget {
  font-size: 13px !important;
  white-space: nowrap;
}


/************************* 
    03. Hero Section
*************************/
.hero-section{
    background-image: url(../images/sfondo.png);
    height:800px;
    width: 100%;
    display: flex;
    align-items: center;
}
.hero-section .hero-image .hero-section-image{
    border: 8px solid var(--white-color);
    border-radius: 500px 500px 0px 0px;
    width: 80%;
}
.hero-section .hero-content h5{
    color: #0b7e3c;
    font-family: var(--primary-font);
}
.hero-section .hero-content h1{
    color: var(--black-color);
    width: 85%;
}
.hero-section .hero-content h1 span{
    color: #0b7e3c;
}
.hero-section .hero-content p{
    width: 66%;
}
.hero-section .emoji-wrap img {
    padding: 15px;
    border-radius: 20px;
    margin-top: -180px;
    background-color: var(--white-color);
    box-shadow: 0px 30px 60px 0px rgba(215, 146, 107, 0.29);
    margin-left: -67px;
}
/************************* 
    04. About US Section
*************************/
.about-section .about-img .exterior-design{
    border-radius: 100px 0px 100px 0px;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.14);
    border: 5px solid var(--white-color);
}
.about-section .about-img .fantastic-lnterior{
    width: 100%;
    max-width: 30%;
    border: 5px solid var(--white-color);
    border-radius: 50%;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.14);
    margin-top: -200px;
}
.about-section .about-content h6,
.process-section h6,
.skill-section h6,
.services-section  h6,
.professional-section h6,
.testimonials-wrap h6,
.blog-section h6,
.contact-section h6{
    color: var(--primary-color);
    font-family: var(--primary-font);
}
.about-section .about-content h2{
    color: var(--black-color);
}
.about-section .about-content .about-divider ,
.about-divider {
    width: 120px;
    border: 2px solid var(--black-color);
    margin-bottom: 15px;
}
.about-section .about-content p {
    width: 89%;
}
/************************* 
    05. Services Section
*************************/
.services-section{
    background-image: url(../images/services-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;   
}
.services-section h6,.skill-content h6{
    color: var(--primary-color);
}
.services-section h2{
    color: var(--black-color);
}
.section-box .card{
    
    padding: 30px;
    border: 1px solid #B197774F;
    border-radius: 0;
    background-color: transparent;
    transition: all .5s;
}
.section-box .card:hover{
    background-color: var(--white-color);
    cursor: pointer;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
}
.section-box .card .card-title-wrap i {
    font-size: 31px;
    line-height: 32px;
    padding: 15px;
    width: 60px;
    text-align: center;
    height: 60px;
    background-color: #B1977733;
    color: #0b7e3c;
    border-radius: 30px;
    transition: all .5s;
    margin-right: 15px;
}
.section-box .card:hover .card-title-wrap i{
    background-color: #0b7e28;
    color: var(--white-color);
}
.section-box .card  .card-title{
    font-family: var(--primary-font);
}
.section-box .card .card-body  .card-divider{
    width: 100%;
    border: 1px solid #B1977729;
    margin-bottom: 15px;
    display: block;
}
.section-box .card .card-body  .card-list span i{
    color: #0b7e3c;
    padding-right: 10px;
}
.section-box .card .card-body  .card-list span{
    color: var(--black-color);
    padding-top: 10px;
}

/************************* 
    06.  Skill Section 
*************************/
.skill-section{
    background-image: url(../images/architecture-bg.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 25%;
}
.skill-section .skill-content p{
    width: 82%;
}
.progress-bar-wrap {
	margin-bottom: 20px;
}
.progress-bar-wrap .animated-progress {
	width: 100%;
	height: 18px;
	border-radius: 5px;
	overflow: hidden;
	position: relative;
	background-color: #eeeeee;
}
.progress-bar-wrap .animated-progress span {
	height: 100%;
	display: block;
	width: 0;
	color: rgb(255, 251, 251);
	line-height: 30px;
	position: absolute;
	text-align: end;
	font-size: 12px;
	background-color: var(--primary-color);
	line-height: 21px;
	padding-right: 5px;
}
.skill-image{
    position: relative;
}
.skill-image img{
    border: 5px solid var(--white-color);
    border-radius: 500px 500px 500px 500px;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.14);
}
.skill-image span {
    width: 200px;
    height: 200px;
    background-color: #0b7e3c;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 80px;
    z-index: -1;
    border-radius: 118px;
}
/************************* 
   07. counter section
*************************/
.counter-section{
    background-image: url(../images/cta-bg.png);
    background-color: var(--primary-color);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.counter-section-text h2,.counter-section-text span{
    font-size: 60px;
    line-height: 70px;
    font-weight: 400;
}
/************************* 
   08. Process Section
*************************/
.process-section .process-box .process-box-wrap h2 {
    background-color: var(--black-color);
    display: inline-block;
    color: var(--white-color);
    font-family: var(--secondary-font);
    padding: 13px 16px;
    border-radius: 40px;
    text-align: center;
}
.process-section .process-box .process-box-wrap p{
    width: 80%;
} 
/************************* 
   09. Portfolio section
*************************/

.portfolio-box-wrap .popup1 img{
    width: 100%;
    height: 285px;
}
.portfolio-box-wrap .popup1 a{
    position: relative;
}
.portfolio-box-wrap a:hover span{
    opacity: 1;
}
.portfolio-box-wrap .popup1 span{
    width: 100%;
    height: 285px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-image: linear-gradient(180deg, #00000000 0%, #000000BF 100%);
    opacity: 0;
    transition:.5s all;
    font-size: 18px;
    line-height: 28px;
    font-family: var(--primary-font);
    color: var(--white-color);
}

.portfolio-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically, if needed */
}

.portfolio-box-wrap {
    padding: 10px; /* Optional: add some padding around each image */
    flex: 1 1 300px; /* Allow the box to grow and shrink, with a base width of 300px */
    max-width: 300px; /* Set the maximum width */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    display: flex; /* Use Flexbox to center the image within the container */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
}

.portfolio-box-wrap img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block;
    object-fit: cover; /* Ensure the image covers the area without distortion */
}

/* Optional: Add some responsiveness */
@media (max-width: 768px) {
    .portfolio-box-wrap {
        flex: 1 1 calc(50% - 20px); /* Allow two images per row with padding */
        max-width: calc(50% - 20px); /* Adjust max-width to fit two images per row */
    }
}

@media (max-width: 480px) {
    .portfolio-box-wrap {
        flex: 1 1 calc(100% - 20px); /* Allow one image per row with padding */
        max-width: calc(100% - 20px); /* Adjust max-width to fit one image per row */
    }
}


/************************* 
   10. Our Professional
*************************/
.professional-box-wrap{
    position: relative;
}
.professional-box-wrap img{
    width: 100%;
}
.professional-box-wrap:hover .professional-content{
    opacity: 1;
}
.professional-content {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    background-color: #02020261;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: flex-end;
    opacity: 0;
    transition:all .6s ease-in-out;
    cursor: pointer;
}
.professional-section .professional-box .professional-item{
    padding-top: 50px;
}
/************************* 
   11. Testimonial section
*************************/
.testimonials-wrap {
    background-color: #B1977712;
}
.testimonials-wrap .testimonial-image img{
    width: 100%;
}
.testimonials-wrap .testimonials-title .subtitle-effect h6 {
    color: var(--primary-color);
    transition: color 1s ease;
}
.testimonials-wrap  .testimonial-wrapper{
    padding: 40px;
    background-color: var(--white-color);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.testimonials-wrap  .testimonial-wrapper .testimonial-slide-wrap img {
    width: 60px;
    margin-right: 10px;
    height: 60px;
    border-radius: 88px;
}
.testimonials-wrap  .testimonial-slide p{
    padding-bottom: 30px;
    font-style: italic;
}
.testimonial-wrapper .slick-arrow {
    display: none !important;
}
.testimonial-wrapper .slick-dots {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 20px 0px 0px;
    list-style-type: none;
}
.testimonial-wrapper .slick-dots button {
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 100%;
    background-color: var(--primary-color);
    border: none;
    text-indent: -9999px;
    margin-left: 10px;
}
.testimonial-wrapper .slick-dots li.slick-active button {
    background-color: var(--black-color);
}
/************************* 
  12. Touch Section 
*************************/
.touch-section{
    background-image: url(../images/cta-bg.png);
    background-color: #0b7e3c;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.touch-btn .btn{
    background-color: var(--white-color);
    color: #0a7337;
    border: 1px solid #0a7337;
}
.touch-btn .btn:hover{
    background-color:transparent;
    color: var(--white-color);
    border: 1px solid var(--white-color);
}
/************************* 
  13. Blog section
*************************/
.blog-section .blog-wrap  .card{
    padding: 20px;
    border-radius: 0px;
    border: 1px solid #B1977736;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all .2s;
}
.blog-section .blog-wrap  .card:hover{
    border-color: var(--primary-color);
}
.blog-section .blog-wrap  .card img{
    border-radius: 0;
}
.blog-section .blog-wrap .blog-btn {
    color: var(--primary-color);
    font-size: 18px;
    line-height: 28px;
    font-family: var(--text);
}
.blog-section .blog-wrap .blog-btn:hover{
    color: var(--black-color);
}

/* Stile generale per il blog-section */
.blog-section {
    padding-top: 50px;
    padding-bottom: 100px;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    .blog-section {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Flex container */
.blog-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Flex item (each card) */
.blog-wrap .col-md-4 {
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card-img-top {
    flex-shrink: 0;
    width: 100%;
    height: auto;
}

.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    margin-bottom: 15px;
}

.card-text {
    flex: 1;
}

.blog-btn {
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 767px) {
    .card {
        margin-bottom: 20px;
    }
}

/************************* 
  14. Contact Us Section
*************************/
.contact-section {
    background-image: url(../images/contact-us-image.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #B1977712;
}
.contact-section p{
    width: 91%;
}
.contact-form-wrap h4{
    font-family: var(--primary-font);
}
.contact-form-wrap .form-row .form-group .form-control{
    margin-bottom: 15px;
    border-radius: 0px;
    font-size: 18px;
    padding: 10px;
    line-height: 28px;
    border: 1px solid #0b7e3c38;
    background-color: var(--white-color);
    color: var(--secondary-color);
}
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25px #d7926b63;
}
.icon-box-wrapper .icon-box-item{
    padding: 20px;
    border: 1px solid rgba(11, 126, 60, 0.22);
    cursor: pointer;
    width: 84%;
    transition: all .3s;
}
.icon-box-wrapper  .icon-box-item i {
    width: 70px;
    height: 70px;
    background-color: #0b7e3c;
    padding: 10px;
    border-radius: 54px;
    display: flex;
    font-size: 32px;
    line-height: 45px;
    text-align: center;
    color: var(--white-color);
    margin-right: 10px;
    align-items: center;
    justify-content: center;
}
.icon-box-wrapper  .icon-box-item:hover{
    padding: 20px;
    background-color: var(--white-color);
    border: 1px solid var(--primary-color);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
}
.icon-box-wrapper  .icon-box-text h5{
    font-family: var(--primary-font);
}
.icon-box-wrapper  .icon-box-text p{
    width: 100%;
}
/************************* 
  15. Footer Section
*************************/
.footer-section{
    background-color: #151515;
}
.footer-item h4{
    font-family: var(--primary-font);
}
.footer-item .footer-contact-info a:hover,
.footer-menu ul li a:hover{
    color: var(--primary-color);
}
.footer-form  .form-row .form-group{
    border-bottom: 1px solid var(--white-color);
}
.footer-form  .form-row .form-group .form-control {
    color: #fff;
    background: transparent;
    border: 0;
}
.footer-form  .form-row .form-group .form-control:focus{
    box-shadow: 0 0 0 0.25px #d7936b00;
    color: var(--white-color);
}
.footer-form  .form-row .form-group .btn{
    background-color: transparent;
    border: none;
    padding: 10px;
}
.footer-copyright{
    background-color: var(--primary-color);
}
.footer-section .footer-item .footer-menu .active{
    color: var(--primary-color);
}
/************************* 
  16. About Us Page
*************************/
.about-hero-section {
    background-image: url(../images/galleria.png);
    height: 300px;
    text-align: center;
    display: flex;
    align-items: center;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;   
}
.title-border{
    border: 1px solid var(--white-color);
    width: 100px;
    display: inline-block;
} 
.about-section-wrap .about-content h2 {
    width: 81%;
}
.about-list ul li i{
    color: var(--primary-color);
    padding-right: 10px;
}
.about-list ul li{
    color:var(--black-color);
    padding-top: 10px;
}
.about-section-wrap .about-img {
    position: relative;
}
.about-section-wrap .about-img img {
    width: 83%;
    max-width: 100%;
    border: 5px solid #fff;
    border-radius: 50%;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.18);
}
.about-section-wrap .about-img span {
    width: 150px;
    height: 150px;
    background-color: var(--primary-color);
    display: inline-block;
    position: absolute;
    bottom: 27px;
    left: 79px;
    z-index: -1;
    border-radius: 118px;
}
.testimonial-section{
    background-color: var(--white-color);
}
.strategy-section{
    background-color: #f9f8f5;
}
.strategy-section .professional-box-item h2 {
    position: absolute;
    top: 0;
    background-color: #02020282;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}
.strategy-section .professional-content {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    background-color: var(--primary-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
    opacity: 0;
    transition: all .6s ease-in-out;
    cursor: pointer;
}
/************************* 
  17. Portfolio Page
*************************/
.portfolio-section-wrap .portfolio-box-wrap .popup1 span,
.portfolio-section-wrap .portfolio-box-wrap .popup1 img{
    height: 350px;
}
/************************* 
  18. Services Page
*************************/
.services-wrap-section{
    background-image: none;
}
.services-hero-section{
    background-image: url(../images/services-bg-img.jpg);
    background-position: center center;
}
/************************* 
  19. Blog Page
*************************/
.services-wrap-section{
    background-image: none;
}
.blog-hero-section{
    background-image: url(../images/turismo.png);
    background-position: center center;
}
/************************* 
  20. Single Blog Page
*************************/
.single-blog-section .single-blog-wrap image{
    width: 100%;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.12);
}
.single-blog-wrap img{
    width: 100%;
}
.single-calendar i{
    color: var(--primary-color);
}
.single-social-icon  a i {
    color: var(--white-color);
    font-size: 18px;
    display: flex;
    line-height: 28px;
    margin-left: 8px;
    width: 35px;
    background-color:var(--primary-color);
    height: 35px;
    text-align: center;
    border-radius: 30px;
    align-items: center;
    justify-content: center;
}
.single-social-icon  a i:hover{
    background-color: var(--black-color);
}
/************************* 
  21. Contact Page
*************************/
.contact-hero-section{
    background-image: url(../images/contact-bg-img.png);
}
.touch-contact-section{
    background-image: none;
    background-color: transparent;
}
.touch-contact-section .icon-box-wrapper .icon-box-item{
    width: 80%;
}
.touch-contact-section .contact-form-wrap{
    padding: 50px 30px;
    box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.12);
}
.touch-contact-section .contact-form-wrap .form-row .form-group .form-control{
    background-color: #f9f8f5;
}
.map-section-wrap .map-section iframe{
    width: 100%;
    height: 450px;
}
.map-section-wrap .map-section{
    height: 450px;
}
/************************* 
  22. 404 Page
*************************/
.error-section {
    background-image: url(../images/error-images.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
}
.error-section .error-content img,
.coming-hero-section .coming-content img {
    width: 60%;
}
.error-section .error-content h2 {
    font-family: var(--primary-font);
}
.error-content h1{
    font-size: 250px;
    line-height: 220px;
    color: var(--white-color);
}
.error-section .error-content p {
    width: 32%;
}
.error-section .error-content .btn{
    border: 1px solid var(--primary-color);
}
.error-section .error-content .btn:hover{
    border: 1px solid var(--white-color);
    color: var(--white-color);
}
/************************* 
  23. Coming Soon Page
*************************/
.coming-hero-section{
    background-image: url(../images/coming-soon.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.coming-hero-title{
    font-family: var(--primary-font);
    font-size: 98px;
    font-weight: 500;
    line-height: 178px;
    color: var(--white-color);
    text-transform: uppercase;
    letter-spacing: 15px;
}
.coming-hero-text  p {
    width: 45%;
    color: var(--white-color);
}
.coming-hero-text .contact-form .form-control {
    background-color: var(--white-color);
    padding: 12px;
    border: 0px;
    border-radius: 0;
    color: var(--black-color) !important;
}
.coming-hero-text .contact-form .btn{
    border-radius: 0px;
    width: 200px;
}
.coming-hero-text .contact-form .btn:hover{
    border-radius: 0px;
    width: 200px;
    border: 1px solid var(--white-color);
}

@media (max-width: 767px) {
  .skill-section .row,
  .services-section .section-box,
  .process-section .process-box,
  .portfolio-section {
    display: flex;
    flex-direction: column;
  }

  .skill-content,
  .skill-image,
  .process-box-wrap,
  .portfolio-box-wrap {
    width: 100%;
    max-width: 100%;
  }

  .skill-image img {
    width: 100%;
    height: auto;
  }

  .popup-content {
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
  }
}

@media (max-width: 767px) {
    .skill-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 767px) {
  .services-section .section-box {
    display: block !important;
  }

  .services-section .section-box > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 30px !important;
  }

  .services-section .card {
    height: auto !important;
    min-height: unset !important;
    margin-bottom: 0 !important;
  }

  .services-section .card-body,
  .services-section .card-list {
    height: auto !important;
    min-height: unset !important;
  }
}

@media (max-width: 991px) {
  #google_translate_element {
    width: 100%;
    margin-top: 15px;
  }

  .about-hero-section {
    padding-top: 120px;
  }

  .about-hero-section {
    margin-top: 80px;
  }
}